<template>
    <div class="h100">
        <div class="box h100" v-show="!mode">
            <div class="ovh" style="flex: 1" >
                <el-table
                        border
                        stripe
                        :data="page.list||[]"
                        height="100%"
                >
                    <el-table-column width="150" prop="username" label="用户名">
                        <template slot-scope="scope">
                            <div class="action">
                                {{scope.row.username}}
                                <i class="el-icon-document-copy primary-color" v-clipboard:copy="scope.row.username" v-clipboard:success="copySuccess"></i>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column width="150" prop="true_name" label="姓名"></el-table-column>
                    <el-table-column width="150" prop="phone" label="手机号"></el-table-column>
                    <el-table-column prop="org_info" label="部门/角色">
                        <template slot-scope="scope">
                            <template v-for="(v,i) in scope.row.items">
                                <el-button type="text" @click="gotoOrg(v)">
                                    {{v.name}}
                                </el-button>
                                <span v-if="i !== scope.row.items.length - 1">
                                &nbsp;/&nbsp;
                            </span>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot-scope="scope" slot="header">
                            <div class="action">
                                <i class="el-icon-plus primary-color" title="新增用户" @click="newUser"></i>
                                <i class="el-icon-paperclip primary-color" title="导出用户" @click="newUser"></i>
                                <el-upload
                                        class="upload-demo"
                                        ref="upload"
                                        action="/api/v20/user/imt"
                                        :auto-upload="true"
                                        :show-file-list="false"
                                        :data="{a:1,b:2}">
                                    <i slot="trigger" class="el-icon-upload primary-color" title="导入用户" ></i>
                                </el-upload>
<!--                                <i class="el-icon-upload primary-color" title="导入用户" @click="newUser"></i>-->
                                <i class="el-icon-download primary-color" title="模板下载" @click="newUser"></i>
                                <el-input
                                        v-model="keyword"
                                        size="mini"
                                        placeholder="输入关键字搜索"/>
                            </div>
                        </template>
                        <template slot-scope="scope">
                            <div class="action">
                                <i class="el-icon-edit primary-color" title="编辑用户"></i>
                                <el-popconfirm
                                        title="这是一段内容确定删除吗？"
                                >
                                    <i class="el-icon-delete danger-color" title="删除用户" slot="reference"></i>
                                </el-popconfirm>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination
                    small
                    class="page"
                    @current-change="load()"
                    @size-change="load()"
                    :current-page.sync="current"
                    :page-sizes="[20, 50, 100]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.totalRow || 0"
            ></el-pagination>
        </div>
        <div class="h100 ovy" v-if="mode" >
            <div class="pgh">
                <el-page-header @back="mode = ''" :content="mode == 'add' ? ('新建用户') : ('编辑用户')">
                </el-page-header>
            </div>
            <el-form :model="single" label-width="80px" style="width: 400px;" :rules="rules" ref="form">
                <el-form-item :label="'用户名'" prop="username">
                    <el-input v-model="single.name"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名" prop="true_name">
                    <el-input v-model="single.true_name"></el-input>
                </el-form-item>
<!--                <el-form-item label="上级部门" prop="pid" v-if="allowChildren === true">-->
<!--                    <el-select v-model="single.parent_id">-->
<!--                        <el-option label="顶级分类" :value="null"></el-option>-->
<!--                        <el-option v-for="v in depList" :label="v.path" :value="v.id"></el-option>-->
<!--                    </el-select>-->
                    <!--                    <el-input v-model="single.name"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="排序">-->
<!--                    <el-input-number type="text" v-model="single.sort"/>-->
<!--                </el-form-item>-->
                <div style="text-align: center">
                    <el-button type="primary" icon="el-icon-check" @click="save(true)" :loading="saving">
                        保存关闭
                    </el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
    import $ from "jquery";

    export default {
        data() {
            return {
                current: 1,
                size: 20,
                page: {},
                keyword: "",
                timer: null,
                key: 0,
                mode: "",
                single:{}
            }
        },
        watch: {
            keyword(nv) {
                this.key = Math.random();
                if (this.timer) {
                    clearTimeout(this.timer);
                }
                this.timer = setTimeout(() => {
                    this.load()
                }, 200);
            }
        },
        mounted() {
            this.load()
        },
        methods: {
            load() {
                var key = this.key;
                $.get("/api/v20/user/list2", {page: this.current, size: this.size, keyword: this.keyword}, json => {
                    if (key != this.key) {
                        return
                    }
                    this.page = json.data || {};
                    ;(this.page.list || []).forEach(e => {
                        try {
                            e.items = JSON.parse(e.org_detail);
                        } catch (e) {
                            e.items = [];
                        }
                    });
                    this.page.totalRow = parseInt(this.page.totalRow);
                }, "json");
            },
            newUser() {
                this.mode = "add";
            },
            /**
             * 跳转到部门管理页面
             * @param v
             */
            gotoOrg(v){
                top.addNavTab && top.addNavTab(
                    'org-edit-' + v.id
                    , v.name
                    , v.type === 'DEP' ? ("/v20/#/dep/" + v.id) : ("/v20/#/role/" + v.id)
                )
            },
            copySuccess(){
                this.$notify.success({
                    title:"提示",
                    message:"复制成功"
                })
            }

        }
    }
</script>

<style scoped lang="less">
    .box {
        display: flex;
        flex-direction: column;
    }

    .page {
        text-align: right;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .action {
        display: flex;
        align-items: center;

        i {
            cursor: pointer;
            font-size: 16px;
            margin-left: 5px;
            margin-right: 5px;
        }
    }
</style>